<template>
  <v-card>
    <v-card-title>Headlines</v-card-title>
    <v-row class="ma-0 pb-5 px-2">
      <v-col
        cols="3"
        sm="2"
      >
        <h1>
          H1
        </h1>
      </v-col>
      <v-col
        cols="9"
        sm="10"
      >
        <h1>
          Heading 1
        </h1>
        <span>font-size: 32px / line-height: 1.5 / font-weight: 600</span>
      </v-col>

      <v-col
        cols="3"
        sm="2"
      >
        <h2>H2</h2>
      </v-col>
      <v-col
        cols="9"
        sm="10"
      >
        <h2>
          Heading 2
        </h2>
        <span>font-size: 24px / line-height: 1.5 / font-weight: 600</span>
      </v-col>

      <v-col
        cols="3"
        sm="2"
      >
        <h3>H3</h3>
      </v-col>
      <v-col
        cols="9"
        sm="10"
      >
        <h3>
          Heading 3
        </h3>
        <span>font-size: 18.72px / line-height: 1.5 / font-weight: 600</span>
      </v-col>

      <v-col
        cols="3"
        sm="2"
      >
        <h4>H4</h4>
      </v-col>
      <v-col
        cols="9"
        sm="10"
      >
        <h4>
          Heading 4
        </h4>
        <span>font-size: 16px / line-height: 1.5 / font-weight: 600</span>
      </v-col>

      <v-col
        cols="3"
        sm="2"
      >
        <h5>H5</h5>
      </v-col>
      <v-col
        cols="9"
        sm="10"
      >
        <h5>
          Heading 5
        </h5>
        <span>font-size: 13.28px / line-height: 1.5 / font-weight: 600</span>
      </v-col>

      <v-col
        cols="3"
        sm="2"
      >
        <h6>H6</h6>
      </v-col>
      <v-col
        cols="9"
        sm="10"
      >
        <h6>
          Heading 6
        </h6>
        <span>font-size: 10.72px / line-height: 1.5 / font-weight: 600</span>
      </v-col>
    </v-row>
  </v-card>
</template>
